import { CONFIG } from '@/constants';
import { getActionSheetList } from '@/servers/api/base';
import { getLibraryList } from '@/servers/api/collection';
import {
    FormattedMessage,
    history,
    useIntl,
    useLocation,
    useModel,
} from '@umijs/max';
import {
    Avatar,
    Button,
    Cascader,
    Col,
    Form,
    Row,
    Select,
    Space,
    Table,
} from 'antd';
import { useEffect, useState } from 'react';

export default function Repository() {
    let location = useLocation();
    const intl = useIntl();
    const { cityOptions } = useModel('global');
    const [form] = Form.useForm();
    const [dataSource, setdataSource] = useState([]); //表格
    const [release_goods, setrelease_goods] = useState([]); //类目
    const scoreOptions = [
        {
            value: 'ASC',
            label: <FormattedMessage id="正序"></FormattedMessage>,
        },
        {
            value: 'DESC',
            label: <FormattedMessage id="倒序"></FormattedMessage>,
        },
    ];
    //详情
    function details(row) {
        history.push('/detail', {
            id: row.id,
            type: 1,
            releaseType: 'resource',
        });
    }
    const columns = [
        {
            title: <FormattedMessage id="姓名"></FormattedMessage>,
            key: 'username',
            render: (text, record) => (
                <>{record[intl.formatMessage({ id: 'item.username' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="主要从事行业"></FormattedMessage>,
            key: 'industry',
        },
        {
            title: <FormattedMessage id="具体位置"></FormattedMessage>,
            key: 'mergename',
            render: (text, record) => (
                <>{record[intl.formatMessage({ id: 'item.city.mergename' })]}</>
            ),
        },
        {
            title: <FormattedMessage id="图标认证"></FormattedMessage>,
            key: 'user_labels',
            render: (text, record) => (
                <>
                    {record.user_labels.map((item) => (
                        <Avatar
                            shape="square"
                            key={item.id}
                            src={CONFIG.IMAGE_URL + item.url}
                        />
                    ))}
                </>
            ),
        },
        {
            title: <FormattedMessage id="操作"></FormattedMessage>,
            key: 'action',
            render: (text, record) => (
                <Space size="middle">
                    <Button
                        type="primary"
                        ghost
                        size="small"
                        onClick={() => {
                            details(record);
                        }}
                    >
                        <FormattedMessage id="查看详情"></FormattedMessage>
                    </Button>
                </Space>
            ),
        },
    ];
    const [tableparams, settableparams] = useState({
        page: 1,
        size: 10,
        departure_city: [], //城市信息
        score_sort: 'ASC', //排序
        type: 1,
        category_id: '', //类目
    });
    function goodsList(params: any) {
        const qParams = {
            ...params,
        };
        delete qParams.departure_city;
        if (params.departure_city && params.departure_city.length > 0) {
            qParams.departure_city =
                params.departure_city[params.departure_city.length - 1];
        }
        getLibraryList({ ...qParams }).then((res) => {
            settableparams(params);
            setdataSource(res.data.list);
        });
    }
    useEffect(() => {
        (async () => {
            const release_goods = await getActionSheetList({
                type: 'release_goods',
            });
            setrelease_goods(release_goods.data);
            goodsList({ ...tableparams, type: location?.state?.type });
        })();
    }, []);
    return (
        <>
            <Form
                colon={false}
                form={form}
                onFinish={(params) =>
                    goodsList({
                        ...tableparams,
                        ...params,
                        page: 1,
                        size: 10,
                    })
                }
                autoComplete="off"
            >
                <Row gutter={15}>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="类目"></FormattedMessage>
                            }
                            name="category_id"
                        >
                            <Select
                                placeholder={intl.formatMessage({
                                    id: '类目',
                                })}
                                allowClear
                                options={release_goods}
                                fieldNames={{
                                    label: intl.formatMessage({
                                        id: 'item.name',
                                    }),
                                    value: 'id',
                                }}
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="地区"></FormattedMessage>
                            }
                            name="departure_city"
                        >
                            <Cascader
                                placeholder={intl.formatMessage({
                                    id: '地区',
                                })}
                                allowClear
                                options={cityOptions}
                                fieldNames={{ value: 'label' }}
                                changeOnSelect
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item
                            label={
                                <FormattedMessage id="评分"></FormattedMessage>
                            }
                            name="score_sort"
                        >
                            <Select
                                placeholder={intl.formatMessage({
                                    id: '评分',
                                })}
                                options={scoreOptions}
                                allowClear
                            />
                        </Form.Item>
                    </Col>
                    <Col span={4}>
                        <Form.Item>
                            <Space>
                                <Button htmlType="submit" type="primary">
                                    <FormattedMessage id="搜索"></FormattedMessage>
                                </Button>
                                <Button
                                    htmlType="reset"
                                    onClick={() => {
                                        goodsList({
                                            page: 1,
                                            size: 10,
                                        });
                                    }}
                                >
                                    <FormattedMessage id="重置"></FormattedMessage>
                                </Button>
                            </Space>
                        </Form.Item>
                    </Col>
                </Row>
            </Form>
            <Table dataSource={dataSource} rowKey="id" columns={columns} />
        </>
    );
}
